讓 Contentlayer 文章支援 MDX - Modern Next.js Blog 系列 #08 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 8

Modern Web

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 8 篇

讓 Contentlayer 文章支援 MDX - Modern Next.js Blog 系列 #08

14th鐵人賽 contentlayer next.js markdown mdx

EasonChang

2022-09-23 23:52:54

1466 瀏覽

分享至

TL;DR

這是「Modern Blog 30 天」系列第 8 篇文章，上一篇我們實作了 Markdown 格式的文章內頁，這篇我們會擴充它，讓他支援 MDX 格式，能在 Markdown 內插入任何 React 元件，提升文章內容靈活度！

結果截圖如下：

MDX post result

這篇修改的程式碼如下：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day07-post-apge-bare-bone...day08-mdx-support

我的個人網站裡也有此系列的好讀版，程式碼更易讀、也支援深色模式和側邊目錄，歡迎前往閱讀！

讓 Contentlayer 支援 MDX 格式

修改 contentlayer.config.ts 檔案

修改 filePathPattern 檔名，以及新增 contentType：

import { defineDocumentType, makeSource } from './src/lib/contentLayerAdapter';

export const Post = defineDocumentType(() => ({
  name: 'Post',
  // 更新 filePathPattern，從 *.md 改成 *.mdx，
  filePathPattern: `content/posts/**/*.mdx`,
  // 並新增下面這行 contentType
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      required: true,
    },
    description: {
      type: 'string',
      required: true,
    },
    slug: {
      type: 'string',
      required: true,
    },
    date: {
      type: 'date',
      required: true,
    },
  },
  computedFields: {
    path: {
      type: 'string',
      resolve: (post) => `/posts/${post.slug}`,
    },
  },
}));

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Post],
});

修改文章內頁的 src/pages/posts/[slug].tsx 檔案

替換掉 render html 的 div，改成 render <MDXContent />：

import { format, parseISO } from 'date-fns';
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import Head from 'next/head';
// 新增下面這行
import { useMDXComponent } from 'next-contentlayer/hooks';

import { allPosts, Post } from '@/lib/contentLayerAdapter';
import styles from '@/styles/Home.module.css';

export const getStaticPaths: GetStaticPaths = () => {
  const paths = allPosts.map((post) => post.path);
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps<Props> = ({ params }) => {
  const post = allPosts.find((post) => post.slug === params?.slug);
  if (!post) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      post,
    },
  };
};

type Props = {
  post: Post;
};

const PostPage: NextPage<Props> = ({ post }) => {
  // 以及新增下面這行
  const MDXContent = useMDXComponent(post.body.code);

  return (
    <div className={styles.container}>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{post.title}</h1>

        <time dateTime={post.date}>
          {format(parseISO(post.date), 'LLLL d, yyyy')}
        </time>

        // 替換掉 render html 的 div，改為 <MDXContent />
        // <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
        <MDXContent />
      </main>
    </div>
  );
};

export default PostPage;

將所有文章副檔名由 .md 改成 .mdx

將所有 content/posts/ 底下的文章副檔名改成 .mdx

如此一來就完成 MDX 格式支援了！

新增任意 React 元件，並插入 MDX 文章內

接著讓我們來測試將 React 元件放進 MDX 文章的 Markdown 內容之間。

新增 `src/components/CustomInput.tsx`

const CustomInput = () => {
  return (
    <div>
      <p>Hello</p>
      <input type="text" />
    </div>
  );
};

export default CustomInput;

修改 `content/posts/20220831-markdown-demo.mdx`

插入剛剛的 CustomInput 元件：

---
title: Markdown demo
description: This is a demo of Markdown
slug: markdown-demo
date: 2022-08-31
type: Post
---

import CustomInput from '../../src/components/CustomInput';

## H2 title

### H3 title

Some content with [link](https://www.google.com)

<CustomInput />